<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工具箱 - 个人中心</title>
    <!-- 引入Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-3">
                <div class="flex items-center space-x-4">
                    <a href="#" class="flex items-center space-x-2">
                        <i class="fas fa-tools text-blue-600 text-2xl"></i>
                        <span class="font-bold text-xl text-blue-600">工具箱</span>
                    </a>
                </div>
                
                <div class="w-1/3">
                    <div class="relative">
                        <input type="text" placeholder="搜索工具..." class="w-full py-2 px-4 bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white">
                        <button class="absolute right-0 top-0 mt-2 mr-4 text-gray-500">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-600 hover:text-blue-600">
                        <i class="far fa-star mr-1"></i>收藏
                    </a>
                    <a href="#" class="text-gray-600 hover:text-blue-600">
                        <i class="far fa-clock mr-1"></i>历史
                    </a>
                    <a href="#" class="flex items-center text-blue-600">
                        <i class="far fa-user-circle text-2xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 页面标题 -->
    <div class="bg-gray-700 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">个人中心</h1>
                    <p class="mt-2">管理您的个人信息、收藏工具和使用记录</p>
                </div>
                <div class="bg-white bg-opacity-20 p-4 rounded-lg hidden md:block">
                    <div class="flex space-x-2 text-sm">
                        <a href="#" class="hover:underline">首页</a>
                        <span>/</span>
                        <span class="font-medium">个人中心</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 侧边栏菜单 -->
            <div class="w-full lg:w-1/4">
                <div class="bg-white rounded-lg shadow-md overflow-hidden">
                    <!-- 用户信息卡片 -->
                    <div class="bg-gray-800 p-6 text-center">
                        <div class="h-24 w-24 rounded-full bg-gray-300 mx-auto mb-4 overflow-hidden">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="h-full w-full object-cover">
                        </div>
                        <h2 class="text-xl font-bold text-white">张三</h2>
                        <p class="text-gray-400 mt-1">zhang@example.com</p>
                        <p class="text-gray-400 text-sm mt-2">注册时间：2023-01-15</p>
                    </div>
                    
                    <!-- 菜单选项 -->
                    <div class="p-2">
                        <a href="#" class="flex items-center p-3 rounded-md bg-blue-50 text-blue-700">
                            <i class="fas fa-user-circle w-6 text-center"></i>
                            <span class="ml-2">个人资料</span>
                        </a>
                        <a href="#" class="flex items-center p-3 rounded-md hover:bg-gray-100 text-gray-700">
                            <i class="fas fa-star w-6 text-center"></i>
                            <span class="ml-2">我的收藏</span>
                        </a>
                        <a href="#" class="flex items-center p-3 rounded-md hover:bg-gray-100 text-gray-700">
                            <i class="fas fa-history w-6 text-center"></i>
                            <span class="ml-2">使用历史</span>
                        </a>
                        <a href="#" class="flex items-center p-3 rounded-md hover:bg-gray-100 text-gray-700">
                            <i class="fas fa-cog w-6 text-center"></i>
                            <span class="ml-2">账号设置</span>
                        </a>
                        <a href="#" class="flex items-center p-3 rounded-md hover:bg-gray-100 text-gray-700">
                            <i class="fas fa-bell w-6 text-center"></i>
                            <span class="ml-2">消息通知</span>
                            <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span>
                        </a>
                        <a href="#" class="flex items-center p-3 rounded-md hover:bg-gray-100 text-gray-700">
                            <i class="fas fa-question-circle w-6 text-center"></i>
                            <span class="ml-2">帮助中心</span>
                        </a>
                        <a href="#" class="flex items-center p-3 rounded-md hover:bg-gray-100 text-red-600">
                            <i class="fas fa-sign-out-alt w-6 text-center"></i>
                            <span class="ml-2">退出登录</span>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 主内容区 -->
            <div class="w-full lg:w-3/4">
                <!-- 个人资料 -->
                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">个人资料</h2>
                    
                    <form>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-gray-700 font-medium mb-2">用户名</label>
                                <input type="text" value="张三" class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-gray-700 font-medium mb-2">电子邮箱</label>
                                <input type="email" value="zhang@example.com" class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-gray-700 font-medium mb-2">手机号码</label>
                                <input type="tel" value="138****1234" class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            <div>
                                <label class="block text-gray-700 font-medium mb-2">所在地区</label>
                                <select class="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option>北京</option>
                                    <option>上海</option>
                                    <option>广州</option>
                                    <option>深圳</option>
                                    <option>杭州</option>
                                    <option>其他</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <label class="block text-gray-700 font-medium mb-2">个人简介</label>
                            <textarea class="w-full border border-gray-300 rounded-md p-2 h-32 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">热爱技术，喜欢尝试各种实用工具，提高工作效率。</textarea>
                        </div>
                        
                        <div class="mt-6 flex justify-end">
                            <button type="button" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium mr-3">
                                取消
                            </button>
                            <button type="button" class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 font-medium">
                                保存修改
                            </button>
                        </div>
                    </form>
                </div>
                
                <!-- 账号安全 -->
                <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">账号安全</h2>
                    
                    <div class="space-y-4">
                        <div class="flex justify-between items-center pb-4 border-b border-gray-200">
                            <div>
                                <h3 class="font-medium text-gray-800">登录密码</h3>
                                <p class="text-gray-600 text-sm">建议定期更换密码，且不要与其他网站密码相同</p>
                            </div>
                            <button class="text-blue-600 hover:underline">修改</button>
                        </div>
                        
                        <div class="flex justify-between items-center pb-4 border-b border-gray-200">
                            <div>
                                <h3 class="font-medium text-gray-800">手机绑定</h3>
                                <p class="text-gray-600 text-sm">已绑定：138****1234</p>
                            </div>
                            <button class="text-blue-600 hover:underline">更换</button>
                        </div>
                        
                        <div class="flex justify-between items-center pb-4 border-b border-gray-200">
                            <div>
                                <h3 class="font-medium text-gray-800">邮箱绑定</h3>
                                <p class="text-gray-600 text-sm">已绑定：zha**@example.com</p>
                            </div>
                            <button class="text-blue-600 hover:underline">更换</button>
                        </div>
                        
                        <div class="flex justify-between items-center">
                            <div>
                                <h3 class="font-medium text-gray-800">两步验证</h3>
                                <p class="text-gray-600 text-sm">未开启，建议开启提高账号安全性</p>
                            </div>
                            <button class="bg-blue-600 text-white py-1 px-3 rounded-md hover:bg-blue-700 text-sm">开启</button>
                        </div>
                    </div>
                </div>
                
                <!-- 我的收藏 -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-bold text-gray-800">我的收藏</h2>
                        <div class="text-sm">
                            <span class="text-gray-500">排序：</span>
                            <select class="border border-gray-300 rounded-md px-2 py-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option>收藏时间</option>
                                <option>使用频率</option>
                                <option>字母顺序</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div class="border border-gray-200 rounded-lg p-4 relative">
                            <button class="absolute top-2 right-2 text-red-500 hover:text-red-700">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                            <div class="flex items-center mb-3">
                                <div class="rounded-full bg-blue-100 p-2 mr-3">
                                    <i class="fas fa-text-height text-blue-600"></i>
                                </div>
                                <h3 class="font-bold">文本转换器</h3>
                            </div>
                            <p class="text-gray-600 text-sm mb-3">将文本转换为大写、小写或首字母大写</p>
                            <div class="text-xs text-gray-500">收藏于：2023-04-10</div>
                            <a href="#" class="mt-3 text-blue-600 hover:underline text-sm block">打开工具</a>
                        </div>
                        
                        <div class="border border-gray-200 rounded-lg p-4 relative">
                            <button class="absolute top-2 right-2 text-red-500 hover:text-red-700">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                            <div class="flex items-center mb-3">
                                <div class="rounded-full bg-green-100 p-2 mr-3">
                                    <i class="fas fa-image text-green-600"></i>
                                </div>
                                <h3 class="font-bold">图片压缩</h3>
                            </div>
                            <p class="text-gray-600 text-sm mb-3">无损压缩图片，减小文件体积</p>
                            <div class="text-xs text-gray-500">收藏于：2023-04-05</div>
                            <a href="#" class="mt-3 text-blue-600 hover:underline text-sm block">打开工具</a>
                        </div>
                        
                        <div class="border border-gray-200 rounded-lg p-4 relative">
                            <button class="absolute top-2 right-2 text-red-500 hover:text-red-700">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                            <div class="flex items-center mb-3">
                                <div class="rounded-full bg-purple-100 p-2 mr-3">
                                    <i class="fas fa-code text-purple-600"></i>
                                </div>
                                <h3 class="font-bold">JSON格式化</h3>
                            </div>
                            <p class="text-gray-600 text-sm mb-3">格式化、验证和美化JSON数据</p>
                            <div class="text-xs text-gray-500">收藏于：2023-03-28</div>
                            <a href="#" class="mt-3 text-blue-600 hover:underline text-sm block">打开工具</a>
                        </div>
                    </div>
                    
                    <div class="mt-6 text-center">
                        <button class="text-blue-600 hover:underline inline-flex items-center">
                            查看更多收藏 <i class="fas fa-chevron-down ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-10 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">关于我们</h3>
                    <p class="text-gray-400">工具箱是一个提供各种在线工具的平台，旨在为用户提供便捷、高效的在线工具服务。</p>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">热门工具</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">图片压缩</a></li>
                        <li><a href="#" class="hover:text-white">JSON格式化</a></li>
                        <li><a href="#" class="hover:text-white">文本转换器</a></li>
                        <li><a href="#" class="hover:text-white">单位换算</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">常用链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white">使用指南</a></li>
                        <li><a href="#" class="hover:text-white">用户协议</a></li>
                        <li><a href="#" class="hover:text-white">隐私政策</a></li>
                        <li><a href="#" class="hover:text-white">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white text-xl">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2023 工具箱 版权所有</p>
            </div>
        </div>
    </footer>
</body>
</html> 